<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>房间表单</title>
</head>
<body>
<!-- 房间模态框 -->
<div id="room-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
    <div class="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto transform transition-all duration-300 scale-95 opacity-0" id="room-modal-content">
        <div class="p-6 border-b">
            <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold text-neutral-dark" id="room-modal-title">添加房间</h3>
                <button id="close-room-modal" class="text-gray-400 hover:text-gray-500">
                    <i class="fa-solid fa-times"></i>
                </button>
            </div>
        </div>

        <div class="p-6">
            <form id="room-form" class="space-y-4">
                <!-- 隐藏字段：房间ID（用于编辑时传递数据） -->
                <input type="hidden" id="room-id" name="id">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- 房间号 -->
                    <div class="space-y-2">
                        <label for="room-number" class="block text-sm font-medium text-gray-700">
                            房间号 <span class="text-red-500">*</span>
                        </label>
                        <input
                            type="text"
                            id="room-number"
                            name="room_number"
                            required
                            pattern="[A-Za-z0-9-]+"
                            class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary"
                            placeholder="格式：101 或 A-102"
                        >
                    </div>

                    <!-- 楼层 -->
                    <div class="space-y-2">
                        <label for="floor" class="block text-sm font-medium text-gray-700">
                            楼层 <span class="text-red-500">*</span>
                        </label>
                        <input
                            type="number"
                            id="floor"
                            name="floor"
                            required
                            min="1"
                            max="100"
                            class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary"
                            placeholder="1-100之间的整数"
                        >
                    </div>

                    <!-- 房间类型 -->
                    <div class="space-y-2 md:col-span-2">
                        <label for="room-type" class="block text-sm font-medium text-gray-700">
                            房间类型 <span class="text-red-500">*</span>
                        </label>
                        <select
                            id="room-type"
                            name="room_type_id"
                            required
                            class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary appearance-none bg-white"
                        >
                            <option value="" disabled selected>请选择房间类型</option>
                            <option value="1">标准单人间</option>
                            <option value="2">标准双人间</option>
                            <option value="3">豪华单人间</option>
                            <option value="4">豪华双人间</option>
                            <option value="5">商务套房</option>
                            <option value="6">总统套房</option>
                        </select>
                    </div>

                    <!-- 面积 -->
                    <div class="space-y-2">
                        <label for="area" class="block text-sm font-medium text-gray-700">
                            面积 (m²) <span class="text-red-500">*</span>
                        </label>
                        <input
                            type="number"
                            id="area"
                            name="area"
                            required
                            min="0"
                            step="0.1"
                            class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary"
                            placeholder="例如：25.5"
                        >
                    </div>

                    <!-- 床型 -->
                    <div class="space-y-2">
                        <label for="bed-type" class="block text-sm font-medium text-gray-700">
                            床型 <span class="text-red-500">*</span>
                        </label>
                        <select
                            id="bed-type"
                            name="bed_type"
                            required
                            class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary appearance-none bg-white"
                        >
                            <option value="" disabled selected>请选择床型</option>
                            <option value="单人床">单人床</option>
                            <option value="双人床">双人床</option>
                            <option value="双床">双床</option>
                            <option value="大床">大床</option>
                            <option value="特大床">特大床</option>
                        </select>
                    </div>

                    <!-- 最大入住人数 -->
                    <div class="space-y-2">
                        <label for="max-guests" class="block text-sm font-medium text-gray-700">
                            最大入住人数 <span class="text-red-500">*</span>
                        </label>
                        <input
                            type="number"
                            id="max-guests"
                            name="max_guests"
                            required
                            min="1"
                            max="10"
                            class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary"
                            placeholder="1-10之间的整数"
                        >
                    </div>

                    <!-- 房间状态 -->
                    <div class="space-y-2">
                        <label for="status" class="block text-sm font-medium text-gray-700">
                            房间状态 <span class="text-red-500">*</span>
                        </label>
                        <select
                            id="status"
                            name="room_status_id"
                            required
                            class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary appearance-none bg-white"
                        >
                            <option value="1">可用</option>
                            <option value="2">已入住</option>
                            <option value="3">已预定</option>
                            <option value="4">维护中</option>
                        </select>
                    </div>
                </div>

                <!-- 房间描述 -->
                <div class="space-y-2">
                    <label for="description" class="block text-sm font-medium text-gray-700">
                        房间描述
                    </label>
                    <textarea
                        id="description"
                        name="description"
                        rows="3"
                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary"
                        placeholder="填写房间设施、朝向等详情"
                    ></textarea>
                </div>
            </form>
        </div>

        <div class="p-6 border-t flex justify-end gap-3">
            <button
                id="cancel-room-btn"
                class="px-4 py-2 border border-gray-200 rounded-lg text-sm font-medium text-neutral-dark hover:bg-gray-50 transition-colors"
            >
                取消
            </button>
            <button
                id="save-room-btn"
                class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors btn-hover"
                type="submit"
            >
                保存
            </button>
        </div>
    </div>
</div>
</body>
</html>